<!--
 * @Descripttion: 鼠标右击显示操作
 * @version:
 * @Author: 周子尧
 * @Date: 2021-02-05 10:25:04
 * @LastEditors: 周子尧
 * @LastEditTime: 2021-02-05 14:49:55
-->
<template>
  <div
    v-show="show && options.length > 0"
    :style="{ left: `${left}px`, top: `${top}px` }"
    class="contextmenu"
    @click.stop=""
  >
    <el-cascader-panel
      ref="cascader"
      v-model="value"
      :options="options"
      :props="{ expandTrigger: 'hover' }"
    />
  </div>
</template>
<script>
export default {
  name: 'RightClickMenu',
  props: {
    options: {
      type: Array,
      default() {
        return []
      }
    }
  },
  data() {
    return {
      show: false,
      left: 0,
      top: 0,
      rowData: {},
      value: undefined
    }
  },
  watch: {
    value() {
      if (this.value) {
        this.show = false
        const { value, rowData } = this
        this.$emit('callBack', value, rowData)
      } else {
        this.$refs.cascader.clearCheckedNodes()
      }
    },
    show() {
      if (this.show) {
        document.body.addEventListener('click', this.closeMenu)
      } else {
        this.value = ''
        document.body.removeEventListener('click', this.closeMenu)
      }
    }
  },
  mounted() {
    // 页面滚动时取消
    window.addEventListener('scroll', this.closeMenu)
  },
  methods: {
    showMenu(data, event) {
      if (event.preventDefault) {
        event.preventDefault()
      } else {
        event.returnValue = false
      }
      this.rowData = data
      this.top = event.clientY - 90
      this.left = event.clientX
      this.show = true
    },
    closeMenu() {
      this.show = false
    }
  }
}
</script>
<style lang="scss" scoped>
.contextmenu {
  margin: 0;
  z-index: 9999;
  background-color: #ffffff;
  position: absolute;
  box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, 0.3);
}
</style>
